<template>
    <view class="shopnav">
		
    	<navigator class="item" :class="{active:navItem===item.code}" :url="item.url" v-for="(item,index) in newNavList" :key="index" v-if="item.show" open-type="redirect">
    		<view class="nav-img"><image :src="navItem===item.code?item.checkedImg:item.img" mode=""></image></view>
    		<view class="nav-title">{{item.name}}</view> 
    	</navigator>
		 
    </view>  
</template>

<script>
    export default {
        data() {
            return { 
				navList:[
					{
						url:'/pages/prentice/prentice',
						index:1,
						img:'../../static/nav-1.png?version='+Math.random(),
						name:'推广中心',
						code:'prentice',
						checkedImg:'../../static/nav-1h.png?version='+Math.random(),
						show:true
					},
					{
						url:'/pages/info/info',
						index:2,
						img:'../../static/nav-2.png?version='+Math.random(),
						name:'壹点联盟',
						code:'info',
						checkedImg:'../../static/nav-2h.png?version='+Math.random(),
						show:true
					},
					{
						url:'/pages/user/user',
						index:3,
						img:'../../static/nav-3.png?version='+Math.random(),
						name:'我的主页',
						code:'user',
						checkedImg:'../../static/nav-3h.png?version='+Math.random(),
						show:true
					},
				],
				newNavList:[]
            }
        },
        props: {
            navItem: { type: String, default:'index' }
        },
		watch:{
			
		},
        computed: {
            
        },
        methods: {
            goBack() {
                uni.navigateBack()
            },
			roleNav(type){
				this.newNavList = []
				let list = this.navList
				this.newNavList = this.navList
			}
        },
		mounted(){
			let roleId = 1;
			this.roleNav(roleId)
		}
    }
</script>

<style lang="scss" scoped>
.shopnav{
	position: fixed;
	bottom: 0;
	left: 0;
	height: 130upx;
	width: 100%;
	background-color: #fff;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	border-top: 1upx solid #e8e8e8;
	z-index: 499;
	.item{
		width: 33.33%;
		height: 130upx;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		position: relative;
		.nav-img{
			width: 65upx;
			height: 65upx;
			margin: 0 auto;
			margin-top: 10upx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.nav-title{
			font-size: 28upx;
			line-height: 50upx;
			font-weight: bold;
		}
	}
	.item.active{
		.nav-title{
			color: $base-color;
		} 
	}
 
}
</style>